<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>切换背景色</title>
    <script type="text/javascript">
        let colors = [];

        function init() {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "./../asset/color.xml", false);
            xhr.send();
            let xmlDoc = xhr.responseXML;
            colors = xmlDoc.querySelectorAll("color");  /* 通过标签名获取所有学生 */
            let select = document.getElementById("select_color");
            for (let i = 0; i < colors.length; i++) {
                select.options[i] = new Option(colors[i].querySelector("name").innerHTML);
            }
            let color = colors[0].querySelector("rgb").innerHTML;
            document.body.setAttribute("style", "background-color:" + color + ";");
        }
    </script>
</head>
<body onload="init()">
<label for="select_color">请选择网页背景色：</label><select id="select_color" onclick="fun()"></select>
<label>
    <input type="range" value="50">
</label>
<script type="text/javascript">
    function fun() {
        let select = document.getElementById("select_color");
        let index = select.selectedIndex;
        let color = colors[index].querySelector("rgb").innerHTML;
        document.body.setAttribute("style", "background-color:" + color + ";");
    }
</script>
</body>
</html>